import React from "react";
import { Empty, Table } from "antd";

import { useTable } from "../hooks/useTable";
import { usePageContext } from "../hooks/useContext";
import { useColumns } from "../hooks/useColumns";

const DataTable = () => {
  const { columns } = useColumns();
  const {
    state: {
      pagination: { pageSize, current }
    }
  } = usePageContext();
  const { items, total, loading, error, handleChange } = useTable();

  return (
    <>
      {error ? (
        <Empty />
      ) : (
        <Table
          dataSource={items}
          columns={columns}
          loading={loading}
          rowKey={record => record.id}
          onChange={handleChange}
          pagination={{
            pageSizeOptions: ["10", "20", "50", "100"],
            showSizeChanger: true,
            locale: { items_per_page: "" },
            showTotal: (total, range) =>
              `共${total}条，当前显示第${range[0]}-${range[1]}条`,
            pageSize: pageSize,
            current: current,
            total: total
          }}
        />
      )}
    </>
  );
};

export default DataTable;
